/* 样式代码 */
.wap{display: none;}
.job-dialog{
  padding: 0 !important;border-radius: 20px !important;
  .el-dialog__header{display: none !important;}
  .el-dialog__body{padding: 0 !important; }
}
.login-pup{
  padding:0 !important; background-color: transparent !important;
  .el-dialog__body{padding:0 !important;}
  .el-dialog__header{padding-bottom: 0 !important;}
}


.el-dialog__body{padding: 0px !important;}
.max-content{max-width: 800px;}
/********************   相关按钮时常出现黑色边框的解决方法-start   ****************************/
.el-tabs__item:focus,.el-tooltip__trigger:focus-visible{
  outline: unset !important;
}
/********************   相关按钮时常出现黑色边框的解决方法--end   -webkit-line-clamp: 2  ****************************/
.text-line1,.text-line2,.text-line3,.text-line4,.text-line5,.text-line6{
  display: -webkit-box;
  -webkit-line-clamp: 1; line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-line1{-webkit-line-clamp: 1; line-clamp: 1;}
.text-line2{-webkit-line-clamp: 2; line-clamp: 2;}
.text-line3{-webkit-line-clamp: 3; line-clamp: 3;}
.text-line4{-webkit-line-clamp: 4; line-clamp: 4;}
.text-line5{-webkit-line-clamp: 5; line-clamp: 5;}
.text-line6{-webkit-line-clamp: 6; line-clamp: 6;}
.margin-auto{margin-left: auto;}

/* 1. 设置滚动条整体宽度 */
::-webkit-scrollbar {
  width: 4px; /* 纵向滚动条宽度 */
  height: 10px; /* 横向滚动条高度 */
}

/* 2. 设置滚动条轨道样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景颜色 */
  border-radius: 5px; /* 圆角 */
}

/* 3. 设置滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background: #ddd; /* 滑块颜色 */
  border-radius: 5px; /* 圆角 */
}

/* 4. 鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
  background: #f5f5f5; /* 悬停时的颜色 */
}
.el-scrollbar__wrap{max-width: 100vw;}
.markdown{
  line-height: 1.8; color: #404040; max-width: 100%;
  pre{
    background: #000;
        padding: 10px;
        border-radius: 8px;
  }
  pre.language-html{border-radius: 4px; white-space: pre-wrap !important; word-wrap: break-word; max-width: calc(100vw - var(--wap-pad) * 2);}
  code.language-html{
    white-space: pre-wrap !important;
    word-wrap: break-word;
  }
  pre[class*="language-"]{
    border-radius: 6px;
  }
  pre .shape{display: none !important;}
  h1, h2, h3, h4, h5, h6{font-size: x-large; font-weight: bold;}
  h1{margin: 0.67rem 0;}
  h2{margin: 0.83rem 0;}
  h3{margin: 1rem 0;}
  h4{margin: 1.33rem 0;}
  h5{margin: 1.67rem 0;}
  h6{margin: 2.33rem 0;}
  ul,ol{list-style: auto; padding-left: 2em;}
  li::marker{color: #8b8b8b;}
  // :last-child{display: none;}
}
/* 适配 */
.clear-icon{width: 24px;}
.web{display:block}
.wap,.wap-header{display:none}
.zb-nav .el-icon{display:none}
$hvH: calc(var(--vh, 1vh) * 100);
@media only screen and (max-width: 769px){
  .wap{display: block;}
  body{padding-top:var(--headerH)}
  .el-dialog__header{padding-bottom: 0.2rem !important;}
  .el-dialog__title{font-size: 0.3rem !important;}
  .el-popup-parent--hidden{width: 100% !important;}
  body{font-size: 12px;}
  .no-header{position: fixed; width: 100%; left: 0; top: 0; z-index: var(--zindex3); height: calc($hvH - var(--bottomH)) !important; overflow-y: auto;}
  .no-head-foot{position: fixed; width: 100%; left: 0; top: 0; z-index: var(--zindex3); height: $hvH !important;  overflow-y: auto;}
  .markdown{
    line-height: 1.8; color: #404040;font-size: 0.32rem;
    .language-html{font-size: 0.32rem;}
    pre.language-css{border-radius: 4px;}
    code.language-css{
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    h1, h2, h3, h4, h5, h6{font-size: large; font-weight: bold;}
    h1{margin: 0.3rem 0;}
    h2{margin: 0.25rem 0;}
    h3{margin: 0.2rem 0;}
    h4{margin: 0.15rem 0;}
    h5{margin: 0.1 0;}
    h6{margin: 0.05rem 0;}
    ul,ol{
      list-style: auto; padding-left: 2em;
      ul,ol{
        padding-left: 1.2em;
      }
    }
    li::marker{color: #8b8b8b;}
  }
  
  
  
  .form-tips{font-size: 12px;}
  .el-textarea__inner{font-size: 12px;}
  .wap{display:block}
  .web{display:none}
  .layout-header{
    .header-logo{min-width:30%; max-width:50%; width: 100%;}
  }
  .wap-header{
    display:flex; position:fixed; align-items: center; justify-content: space-between; padding:0 16px; border-radius:0px; right:0; top:0px;  height:59px;z-index: var(--zindex1);  background-color:#fff; width:100%;
    .back{display:flex; align-items: center; justify-content: space-between; color:#000; font-size:0.28rem}
  }
  
  
  /* 定义整个滚动条的宽度 */
  body::-webkit-scrollbar {
      width: 0px; /* 或者你想要的宽度 */
  }
  // 手机端绑定手机号弹窗
  .el-overlay-dialog{
    animation-name: fadeIn0 !important;
  }
  .el-overlay{
    overflow: hidden;
  }
  .el-dialog.login-pup{
    padding:0 !important; width: 100vw !important; max-width: 100vw !important; overflow: hidden; background-color: #fff !important;
    border-radius: 0.32rem 0.32rem 0 0 !important; overflow: hidden;  left: 0; bottom: 0; margin: 0; position: fixed;
    animation-name: fadeUp !important; /* 使用定义的关键帧 */
    animation-duration: 0.15s; /* 动画持续时间为 0.5 秒 */
    animation-delay: 0.01s; /* 延迟 0.1 秒后开始动画 */
    animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
    .el-dialog__headerbtn{
      z-index: 9; width: 0.4rem; height: 0.4rem; top: 0.15rem; right: 0.15rem; transform: rotate(45deg) ;
      svg{display: none;}
      &::before, &::after {
        content:''; display: block;border-radius: 3px; background-color: #000; position: absolute;  transform: translate(-50%,-50%); left: 50%; top: 50%;
      }
      &::after{height: 80%; width: 2px;}
      &::before{width: 80%; height: 2px;}
    }
    .el-dialog__body{padding:0 !important;}
    .el-dialog__header{padding-bottom: 0 !important;}
  }
}



.none{display: none;}
// 记载中动画
/* 父容器样式 */
.loading {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 4px; /* 点之间的间距 */
}

/* 单个点的样式 */
.loading span {
  width: 8px;
  height: 8px;
  background-color: var(--el-color-primary); /* 点的颜色 */
  border-radius: 50%; /* 圆形 */
  display: inline-block;
  animation: loading-dot 1s infinite; /* 应用动画 */
}

/* 第二个点延迟 0.2 秒 */
.loading span:nth-child(2) { animation-delay: 0.2s; }
/* 第三个点延迟 0.4 秒 */
.loading span:nth-child(3) { animation-delay: 0.4s; }

/* 定义关键帧 */
@keyframes loading-dot {
  0%, 100% {
    opacity: 0.3; /* 初始透明度较低 */
  }
  50% {
    opacity: 1; /* 中间状态完全可见 */
  }
}

/* 呼吸效果 */
.breathing{animation: breathing 1.5s ease-in-out infinite;}
@keyframes breathing {
  0%, 100% { transform: scale(1); opacity: 1;}
  50% { transform: scale(1.05); opacity: 0.9; }
}
.fadeIn{
  animation-name: fadeIn; /* 使用定义的关键帧 */
  animation-duration: 0.5s; /* 动画持续时间为 0.5 秒 */
  animation-delay: 0.01s; /* 延迟 0.1 秒后开始动画 */
  animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
  opacity: 0;
}

/* 定义关键帧 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fadeUp{
  animation-name: fadeUp; /* 使用定义的关键帧 */
  animation-duration: 0.2s; /* 动画持续时间为 0.5 秒 */
  animation-delay: 0.01s; /* 延迟 0.1 秒后开始动画 */
  animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
  transform: translateY(100%);
}
/* 定义关键帧 */
@keyframes fadeUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes fadeUp2 {
  0% { transform: translateY(140%); opacity: 0;}
  // 30% { transform: translateY(70%); opacity: 1;}
  100% { transform: translateY(0); opacity: 1;}
}
.fadeDown{
  animation-name: fadeDown; /* 使用定义的关键帧 */
  animation-duration: 0.2s; /* 动画持续时间为 0.5 秒 */
  animation-delay: 0s; /* 延迟 0.1 秒后开始动画 */
  animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
  transform: translateY(0);
}
/* 定义关键帧 */
@keyframes fadeDown {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}
.fadeOut{
  animation-name: fadeOut; /* 使用定义的关键帧 */
  animation-duration: 0.5s; /* 动画持续时间为 0.5 秒 */
  animation-delay: 0.01s; /* 延迟 0.1 秒后开始动画 */
  animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
}
/* 定义关键帧 */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}



$w:10px;
$w2:5px;
$time:2.6s;
.shape {
width: $w;
height: $w; position: relative; display: inline-block; vertical-align: middle; margin-left: 5px;
.dot1,.dot2{display: inline-block; vertical-align: middle; position: absolute; left: 0; top:0;}
.dot1{
  border-left: $w2 solid transparent;
  border-right: $w2 solid transparent;
  border-bottom: $w solid var(--el-color-primary); 
  animation: shape-change1 $time infinite ease;
  animation-delay: calc( $time * 1 );opacity: 0;
}
.dot2{
  width: $w; height: $w; background-color: var(--el-color-primary);
  animation: shape-change2 $time infinite ease;
   border-radius:50%;
}
}
@keyframes shape-change2 {
0% { transform: rotate(0deg) scale(1); opacity: 1;}
40% { transform: rotate(180deg) scale(0.2); opacity: 0.1; }
60% { transform: rotate(180deg) scale(0); opacity: 0; }
100% { transform: rotate(360deg) scale(1); opacity: 1; }
}
@keyframes shape-change1 {
0% { transform: rotate(0deg) scale(0); opacity: 0.1;  }
50% { transform: rotate(180deg) scale(1); opacity: 1; }
100% { transform: rotate(0deg) scale(0); opacity: 0; }
}